<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  User: dw
  Date: 2019/12/16
  Time: 23:13
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>XXX公司测评系统</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
</head>
<body>
  <div class="layui-fluid">
    <div class="layui-card">
      <div class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">部门</label>
            <div class="layui-input-inline">
              <select id="dep" lay-filter="dep" name="depId">

              </select>
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">员工</label>
            <div class="layui-input-inline">
              <select id="user" lay-filter="user" name="userId">
                <option value="1">经理1</option>
              </select>
            </div>
          </div>
          <div class="layui-inline">
            <button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="LAY-user-front-search">
              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
          </div>
        </div>
      </div>

      <div class="layui-card-body">
        <div style="padding-bottom: 10px;">
          <button class="layui-btn layuiadmin-btn-admin" data-type="add" id="btnAdd">添加新员工</button>
        </div>
        <table id="userList" lay-filter="userList">

        </table>
      </div>
    </div>
  </div>

  <script src="../../../layuiadmin/layui/layui.js"></script>  
  <script>
  layui.config({
    base: '../../../layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'useradmin', 'table','form','laydate'], function(){
    var $ = layui.$
    ,form = layui.form
    ,laydate = layui.laydate
    ,table = layui.table;

      //文档加载时加载部门信息
      $(function () {
          //加载部门信息
          $.ajax({
              url: "/dep/loadAll",
              data:{},
              dataType:"json",
              type:"post",
              success:function (res) {
                  var depList = res;

                  var str = "";
                  for(var i = 0;i < depList.length; i++){
                      var dep = depList[i];
                      str += "<option value='"+dep.depId+"'>"+dep.depName+"</option>";
                  }
                  $("#dep").html(str);
                  //必须重新加载
                  form.render();
              },
              error:function (e) {
                  console.log(e.responseText)
              }
          });
      });

      //加载用户信息
      form.on('select(dep)',function (data) {
          var depId = data.value;
          $.ajax({
              url: "/user/loadAll?depId="+depId+"",
              data:{},
              dataType:"json",
              type:"post",
              success:function (res) {
                  var userList = res;
                  var str = "";
                  for(var i = 0;i < userList.length; i++){
                      var user = userList[i];
                      str += "<option value='"+user.userId+"'>"+user.userName+"</option>";
                  }
                  $("#user").html(str);
                  //必须重新加载
                  form.render();
              },
              error:function (e) {
                  console.log(e.responseText)
              }
          });
      })
      //监听搜索
      form.on('submit(LAY-user-front-search)', function(data){
          var field = data.field;
          //执行重载
          table.reload('userList', {
              where: field
          });
      });
    //加载表格
    table.render({
        elem:"#userList",
        height:500,
        url:"/user/loadUserList",
        page:true,
        where:{
            name:''
        },
        limit:10,
        cols:[[
            {field:"userId",width:'10%',title:"工号",sort:true},
            {field:"userName",width:'6%',title:"姓名"},
            {field:"userGender",width:'4%',title:"性别"},
            {field:"depId",width:'8%',title:"所属部门",templet:function(d){
                    return d.dep.depName;
                }},
            {field:"passWord",width:'4%',title:"密码",templet:function(d){
                    return "******";
                }},
            {field:"authority",width:'10%',title:"角色",templet:function(d) {
                    switch (d.authority) {
                        case 3:
                            return "管理员";
                            break;
                        case 2:
                            return "经理";
                        case 1:
                            return "主管";
                        case 0:
                            return "普通员工";
                    }

                }},
            {field:"tel",width:'8%',title:"联系电话"},
            {field:"operator",width:'10%',title:"操作",
                templet:function(d){
                    return "  <button type='button' class='layui-btn layui-btn-sm' lay-event='edit'>" +
                        "    <i class='layui-icon layui-icon-edit'></i>" +
                        "  </button>" +
                        "<button type='button' class='layui-btn layui-btn-sm' lay-event='delete'>" +
                        "     <i class='layui-icon layui-icon-delete'></i>" +
                        "</button>";
                }}

        ]],
        id:'userList',
        parseData:function (res) {
            console.log(res);
        }
    });
    //点击事件触发(给table添加监听事件)
    table.on('tool(userList)',function (obj) {
        //获取当前行的所有记录 键值对，见识field的属性，值是后台的数据
        var data = obj.data;
        console.log(data);
        //保证用户id
        var userId = data.userId;
        //获取触发事件
        var event = obj.event;
        if (event == "edit") {
            //获取触发事件整行,执行修改
            layer.open({
                type: 2,
                title:'修改用户信息',
                content: '/user/goUpdateUser',
                area: ['510px','600px'],
                btn:['更新','取消'],
                btnAlign: 'c',
                yes: function(index,layero){
                    var data = layer.getChildFrame("#updateUser").serializeArray();
                    $.ajax({
                        url: "/user/updateUser",
                        type: "post",
                        data: data,
                        dataType: "json",
                        success: function(res){
                            if(res.msg == "ok"){
                                layer.msg("修改成功");
                                //刷新
                                $(".layui-laypage-btn")[0].click();
                            }
                            layer.close(index);
                        }
                    });
                },
                success: function(layero, index){
                    var iframe = window['layui-layer-iframe'+index];
                    //调用子页面的全局函数
                    iframe.child(data);
                }
            });
        } else {
           //删除用户
            $.ajax({
                url: "/user/deleteUser",
                type: "post",
                data: data,
                dataType: "json",
                success: function(res){
                    if(res.msg == "ok"){
                        layer.msg("删除成功");
                        //刷新
                        $(".layui-laypage-btn")[0].click();
                    }
                    layer.close(index);
                }
            });
        }
    });
    //添加按钮事件
    $("#btnAdd").on('click',function(){
        layer.open({
            type: 2,
            title: '添加用户',
            content: '/user/goAddUser',
            area: ['510px','600px'],
            btn: ['提交','取消'],
            btnAlign: 'c',
            yes: function(index,layero){
                var data = layer.getChildFrame("#addUser").serializeArray();
                //添加
                $.ajax({
                    url: '/user/addUser',
                    type: 'post',
                    data: data,
                    dateType: "json",
                    success: function (res) {
                        var msg = res.msg;
                        if(msg == "ok"){
                            layer.msg("添加成功");
                            layer.close(index);
                            //刷新
                            $(".layui-laypage-btn")[0].click();
                        }else{
                            layer.msg("添加失败");
                        }
                    }
                });
            }
        });
    });
  });



  </script>
</body>
</html>
